<template>
  <div id="container"></div>
</template>

<script>
import "echarts-liquidfill";
export default {
  created() {},
  mounted() {
    //  初始化
    // 与数值绑定 水波效果
    const dataArr = [
      0.5,
      { value: 0.5, direction: "right" }, //修改波浪的方向
      0.4,
      0.3,
      {
        value: 0.2,
        itemStyle: {
          opacity: 0.4, //透明度
        },
        //鼠标移动后触发
        emphasis: {
          itemStyle: {
            opacity: 0.9,
          },
        },
      },
    ];
    const mycharts = this.$echarts.init(document.getElementById("container"));
    mycharts.setOption({
      series: [
        {
          name: "一个球",
          type: "liquidFill",
          data: dataArr,
          center: ["50%", "50%"], //中心位置
          color: ["#e5e510", "#622c62", "#438a49", "#9cdcfe"], //每个波浪的颜色
          radius: "50%", //半径大小
          waveLength: "110%", //波浪的长度
          direction: "left", //方向-波浪方向
          // phase:'auto',
          phase: 0,
          // 波浪的速度
          period: function (value, index) {
            // This function is called four times, each for a data item in series.
            // `value` is 0.6, 0.5, 0.4, 0.3, and `index` is 0, 1, 2, 3.
            return 20 * index + 1000;
          },
          //   itemStyle: {
          //     opacity: 0.9, //透明度
          //   },
          //   emphasis: {
          //     itemStyle: {
          //       opacity: 0.5,
          //     },
          //   },
          //   静止波浪
          //   waveAnimation: false,
          //   animationDuration: 0,
          //   animationDurationUpdate: 0,
          amplitude: 2, //波浪的幅度
          //  背景样式
          backgroundStyle: {
            borderWidth: 1, //边框粗细
            borderColor: "#66cc33", //边框的颜色
            color: "#00cc99", // 背景颜色
          },
          //  轮廓 最外层圆圈outline
          outline: {
            show: true,
            borderDistance: 0, //轮廓间距
            itemStyle: {
              borderColor: "red",
              shadowBlur: "none", //阴影
              borderWidth: 0,
            },
          },

          shape: "container", //形状
          // shape: "diamond",
          shape: "circle",
          label: {
            show: true,
            // 自定义label 文字
            formatter: function (v) {
              return "别看我";
            },
            fontSize: 20,
            align: "center",
            baseline: "middle",
            position: "inside",
            insideColor: "#fff", //水波与文字重叠后文字展示的颜色
          },
          emphasis: {
            label: {
              show: false,
            },
          },
        },
      ],
      tooltip: {
        show: true,
        formatter: function (v) {
          return v.marker + v.seriesName;
        },
      },
    });
  },
};
</script>
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
 